<template>
  <div class="menu-manage-page">
    <div class="main">
      <div class="header">
        <p class="title">菜单管理</p>
        <div class="search-container">
          <div class="search-input">
            <el-input placeholder="模块名称" v-model="condition"></el-input>
            <el-button class="search-btn" type="primary" @click="handleSearch">
              <i class="el-icon-search"></i>
            </el-button>
            <el-button type="primary" @click="handleRefresh">
              <i class="el-icon-refresh"></i>
            </el-button>
          </div>
          <div class="btns">
            <el-button v-if="hasTabSet" type="primary" @click="handleAdd">
              新增
            </el-button>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="menu-type">
          <div class="menu-title">
            <span>菜单类型</span>
            <div class="btns">
              <i v-if="hasTabAdd" class="el-icon-plus" @click="addMenuType"></i>
              <i v-if="hasTabEdit" class="el-icon-edit-outline" @click="editMenuType"></i>
              <i v-if="hasTabDelete" class="el-icon-delete" @click="delMenuType"></i>
            </div>
          </div>
          <ul>
            <li
              v-for="item in menuTypes"
              :class="classId === item.id ? 'active' : ''"
              :key="item.id"
              @click="handleClick(item.id)">
              {{ item.className }}
            </li>
          </ul>
        </div>
        <div class="table-container">
          <el-table
            v-loading="tableLoading"
            :data="tableData"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            row-key="id">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column prop="name" label="菜单名称"></el-table-column>
            <el-table-column prop="path" label="地址"></el-table-column>
            <el-table-column prop="icon" label="图标" width="120">
              <template slot-scope="scope">
                <i v-if="scope.row.icon" class="iconfont">{{ setIcon(scope.row.icon) }}</i>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100">
              <template slot-scope="scope">
                {{ types[scope.row.type] || '' }}
              </template>
            </el-table-column>
<!--            <el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip></el-table-column>-->
            <el-table-column prop="action" label="操作" width="300">
              <template slot-scope="scope">
                <span style="display: none">{{scope.row.type}}</span>
                <el-button
                  v-if="hasTableAdd && scope.row.type !== '2'"
                  type="primary"
                  size="small"
                  key="add"
                  @click="addChild(scope.row)">
                  新增子级
                </el-button>
                <el-button
                  v-if="hasTableEdit"
                  type="primary"
                  size="small"
                  key="edit"
                  @click="handleEdit(scope.row)">
                  编辑
                </el-button>
                <el-button
                  v-if="hasTableDel"
                  type="danger"
                  size="small"
                  key="del"
                  @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
        </div>
      </div>
      <set-menu
        :visible="visible"
        :type="type"
        :iconList="iconList"
        :menus="tableData"
        :classId="classId"
        :menu-types="menuTypes"
        :loading="loading"
        :option="currentData"
        @cancel="visible = false"
        @submit="handleSave">
      </set-menu>
      <add-menu-type
        :visible="typeVisible"
        :type="menuType"
        :loading="typeLoading"
        :option="typeData"
        @cancel="typeVisible = false"
        @submit="saveMenuType">
      </add-menu-type>
    </div>
  </div>
</template>

<script>
import setMenu from '@/components/corp/setMenu';
import addMenuType from '@/components/corp/addMenuType';

export default {
  components: {
    setMenu,
    addMenuType
  },
  data() {
    return {
      condition: '',
      menuTypes: [],
      classId: '',
      hasSearch: false,
      tableData: [],
      tableLoading: false,
      // 设置菜单
      iconList: [],
      visible: false,
      loading: false,
      type: 'add',
      currentData: {},
      types: {
        '0': '目录',
        '1': '菜单',
        '2': '按钮'
      },
      // 菜单分类设置
      typeVisible: false,
      menuType: 'add',
      typeLoading: false,
      typeData: {}
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.loading = false;
      }
    },
    classId(val) {
      val && this.getTableData();
    }
  },
  created() {
    this.getMenuClass();
    this.getIconList();
  },
  methods: {
    /**
     * 获取菜单
     */
    async getTableData() {
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getMenuTree({
        classId: this.classId
      });
      this.tableLoading = false;
      if (success) {
        this.tableData = data || [];
      }
    },
    /**
     * 获取菜单分类
     */
    async getMenuClass() {
      const { success, data: {
        data
      }} = await this.$Model.getMenuClass({
        pageFlag: false,
        condition: this.hasSearch ? this.condition : ''
      });
      if (success && data) {
        this.menuTypes = data.list || [];
        if (!this.classId) {
          this.classId = this.menuTypes[0]
            ? this.menuTypes[0].id
            : '';
        }
      }
    },
    // 获取icon图标
    getIconList() {
      try {
        /* eslint-disable */
        this.$axios.get(this.$configs.iconJson).then(res => {
          if (res && res.status === 200 && res.data) {
            const glyphs = res.data.glyphs || [];
            this.iconList = glyphs.map(item => ({
              ...item,
              iconStr: eval("'" + `\\u${item.unicode}` + "'")
            }));
          }
        });
      } catch (e) {}
    },
    // 设置icon图标
    setIcon(iconId) {
      const item = this.iconList.find(v => v.icon_id === iconId);
      return item ? item.iconStr : '';
    },
    handleSearch() {
      this.hasSearch = true;
      this.getMenuClass();
    },
    handleRefresh() {
      this.hasSearch = false;
      this.condition = '';
      this.getMenuClass();
    },
    // 新增菜单分类
    addMenuType() {
      this.typeData = {};
      this.menuType = 'add';
      this.typeVisible = true;
      this.typeLoading = false;
    },
    // 编辑菜单分类
    editMenuType() {
      if (!this.classId) {
        return this.$message.warning('请新增分类');
      }
      this.typeData = this.menuTypes.find(v => v.id === this.classId);
      this.menuType = 'edit';
      this.typeVisible = true;
      this.typeLoading = false;
    },
    // 删除菜单分类
    async delMenuType() {
      if (!this.classId) {
        return this.$message.warning('请新增分类');
      }
      this.$confirm('此操作将删除分类, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.delMenuClass({
          ids: this.classId
        });
        if (success) {
          this.classId = '';
          this.getMenuClass();
          this.$message.success('删除成功');
        }
      });
    },
    // 切换菜单分类
    handleClick(id) {
      this.classId = id;
    },
    handleAdd() {
      this.type = 'add';
      this.currentData = {};
      this.visible = true;
    },
    addChild(row) {
      this.type = 'add';
      this.currentData = {
        ...row,
        classId: this.classId,
        evtType: 'add'
      };
      this.visible = true;
    },
    handleEdit(row) {
      this.type = 'edit';
      this.currentData = {
        ...row,
        classId: this.classId,
        evtType: 'edit'
      };
      this.visible = true;

    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.delMenu({
          ids: row.id
        });
        if (success) {
          this.getTableData();
          this.$message.success('删除成功');
        }
      });
    },
    // 保存菜单设置
    async handleSave(data) {
      this.loading = true;
      const { success } = this.type === 'add'
        ? await this.$Model.addMenu(data)
        : await this.$Model.updateMenu(data);
      this.loading = false;
      if (success) {
        this.$message.success('保存成功');
        this.getTableData();
        this.visible = false;
      }
    },
    // 保存菜单分类设置
    async saveMenuType(params) {
      this.typeLoading = true;
      const { success } = this.menuType === 'add'
        ? await this.$Model.addMenuClass(params)
        : await this.$Model.updateMenuClass(params);
      this.typeLoading = false;
      if (success) {
        this.$message.success('保存成功');
        this.getMenuClass();
        this.typeVisible = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../assets/styles/table";
  @import "../../assets/styles/dialog";

  .menu-manage-page {
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    background-color: $baseBg;
    .main {
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: $mainBg;
      .header {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 20px;
        .title {
          font-size: 20px;
        }
        .search-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .search-input {
            display: flex;
            .tabs {
              display: flex;
              margin-right: 20px;
              box-shadow: 0 0 3px 0 $mainBg;
              li {
                width: 120px;
                background: #fff;
                color: rgba(0, 0, 0, .8);
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transition: all .2s;
                &.active, &:hover {
                  background: $linearG;
                  color: #fff;
                }
                &:nth-child(1) {
                  border-radius: 5px 0 0 5px;
                }
                &:nth-last-child(1) {
                  border-radius: 0 5px 5px 0;
                }
              }
            }
            .el-input {
              width: 260px;
              margin-right: 20px;
            }
          }
        }
        .btns {
          .upload-file {
            position: relative;
            cursor: pointer;
            .file {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              opacity: 0;
              cursor: pointer;
            }
          }
        }
      }
      .content {
        width: 100%;
        height: calc(100% - 100px);
        display: flex;
        justify-content: space-between;
        .menu-type {
          width: 300px;
          height: calc(100% - 20px);
          padding-right: 20px;
          border-right: 1px dotted #fff;
          .menu-title {
            height: 40px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 18px;
            }
            .btns {
              display: flex;
              align-items: center;
              i {
                margin-left: 10px;
                width: 25px;
                height: 25px;
                text-align: center;
                line-height: 25px;
                background-color: rgba(160, 164, 179, 0.4);
                border-radius: 5px;
                cursor: pointer;
                &:hover {
                  color: $lightBtnBg;
                }
              }
            }
          }
          ul {
            height: calc(100% - 40px);
            width: 100%;
            overflow-y: auto;
            li {
              height: 40px;
              width: 100%;
              text-align: center;
              line-height: 40px;
              color: #fff;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-bottom: 20px;
              background-color: $lightBtnBg;
              transition: all .2s;
              border-radius: 5px;
              border: 1px solid transparent;
              cursor: pointer;
              &:hover, &.active {
                color: $mainColor;
                background-color: $mainBtnBg;
                border-color: $lightBtnBg;
              }
            }
          }
        }
        .table-container {
          width: calc(100% - 320px);
          height: 100%;
          /deep/ .el-table {
            height: calc(100% - 50px);
            .el-table__body-wrapper {
              height: calc(100% - 40px);
              overflow-y: auto;
              .btn {
                color: $mainColor;
                cursor: pointer;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
